<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box {
          width: 300px;
          height: 200px;
          border: 1px solid red;
        }
        .mask {
          /* 添加兼容型前缀 */
          -webkit-mask-image: url("/src/img/css3/star.png");
          /* 图片为上图提供的纯黑色的五角星,图片默认会水平垂直方向重复 */
          mask-image: url("/src/img/css3/star.png");
          /* 遮罩图像不重复 */
          mask-repeat: no-repeat;
          /* 遮罩图像位置*/
          mask-position: 50px 0px;
        }
      </style>

      <!-- 
        TIP
        mask-position 属性设置遮罩图像在元素内的初始位置，类似于background-position。

        mask-position 属性值	说明	渲染效果
        50px 0px	遮罩图像位于元素左上角水平 50px，垂直 0px 的位置	image-20250525131114983
        left center	遮罩图像位于元素左侧中间	image-20250525130710320
        center	    遮罩图像位于元素中间	image-20250525130843657
        100% 100%	遮罩图像位于元素右下角（right bottom)	image-20250525130930622
      -->

      <div class="box">
        <img src="/src/img/css3/ms.jpg" class="mask" />
      </div>
</body>
</html>